<script setup lang="ts">
import {ref} from 'vue'
// ===== PROPS 声明 =====
interface Props {
  title: string
  initialCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  initialCount: 0
})

// ===== EMITS 声明 =====
const emit = defineEmits<{
  (e: 'update:title', newTitle: string): void
  (e: 'count-change', newCount: number): void
}>()

// ===== 组件逻辑 =====
const internalCount = ref(props.initialCount)

function updateTitle() {
  const newTitle = `${props.title}-updated`
  emit('update:title', newTitle)  // 触发更新
}

function increment() {
  internalCount.value++
  emit('count-change', internalCount.value)  // 带参数的事件
}
</script>

<template>
  <div class="demo">
    <h2>{{ title }}</h2>
    <p>Count: {{ internalCount }}</p>
    
    <button @click="updateTitle">更新标题</button>
    <button @click="increment">增加计数</button>
  </div>
</template>